<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">用户名</label>
									<div class="layui-input-inline">
										<input type="text" name="name" id="name" autocomplete="off" class="layui-input" placeholder="请输入用户名">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">所属部门</label>
									<input type="hidden" name="deptid" id="deptid" />
									<div class="layui-input-inline">
										<input type="text" name="deptname" id="deptname" autocomplete="off" class="layui-input" readonly="readonly"
										 placeholder="请选择所属部门">
									</div>
									<div class="layui-input-inline">
										<a class="layui-btn" id="doSelectDept">选择</a>
									</div>
								</div>
								</br>
								<div class="layui-inline">
									<label class="layui-form-label">地址</label>
									<div class="layui-input-inline">
										<input type="text" name="address" autocomplete="off" class="layui-input" placeholder="请输入地址">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">备注</label>
									<div class="layui-input-inline">
										<input type="text" name="remark" autocomplete="off" class="layui-input" placeholder="请输入备注">
									</div>
								</div>
								<div class="layui-inline" style="text-align: center;">
									<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">
										<i class="layui-icon layui-icon-search"></i>搜索</a>
									<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="data-reset-btn">
										<i class="layui-icon layui-icon-refresh"></i>重置</a>
								</div>
							</div>
						</form>
					</div>
				</fieldset>


				<!--表格开始-->
				<table class="layui-hide" id="userTable" lay-filter="userFilter"></table>
				<div style="display: none;" id="userToolBar">
					<a class="layui-btn layui-btn-sm btn-add btn-add-user" lay-event="addUser">
						<i class="layui-icon layui-icon-addition"></i>添加用户</a>
				</div>
				<script type="text/html" id="availableTpl">
					<!-- 这里的 checked 的状态只是演示 -->
				  <input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用" lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
				</script>
				<div style="display: none;" id="userBar">
					<a class="layui-btn layui-btn-xs btn-update" lay-event="update">编辑</a>
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete btn-delete btn-delete-user" lay-event="delete">删除</a>
					<a class="layui-btn layui-btn-xs layui-btn-warm btn-asign btn-asign-user" lay-event="asign-role">分配角色</a>
					<a class="layui-btn layui-btn-xs layui-btn-warm btn-reset" lay-event="resetUserPwd">重置密码</a>
				</div>
				<!--表格结束-->

				<!--添加和修改的弹层开始-->
				<div id="addOrUpdateDiv" style="display: none; padding: 0.3125rem;">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFilter" id="dataFrm">
						<div class="layui-form-item">
							<label class="layui-form-label">所属部门</label>
							<div class="layui-input-inline">
								<input type="hidden" name="deptid" id="addOrUpdateDeptnameDeptid" />
								<input type="text" name="deptname" id="addOrUpdateDeptname" autocomplete="off" class="layui-input" readonly="readonly"
								 placeholder="请选择所属部门">
							</div>
							<div class="layui-input-inline">
								<a class="layui-btn" id="doDataSelectDept">选择</a>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input type="hidden" name="id" />
								<input type="text" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">登录名称</label>
							<div class="layui-input-block">
								<input type="text" name="loginname" autocomplete="off" placeholder="请输入登录名称" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">地址</label>
							<div class="layui-input-block">
								<input type="text" name="address" autocomplete="off" placeholder="请输入地址" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">备注</label>
							<div class="layui-input-block">
								<input type="text" name="remark" autocomplete="off" placeholder="请输入备注" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">入职时间</label>
								<div class="layui-input-inline">
									<input type="text" name="hiredate" id="hiredate" autocomplete="off" placeholder="请选择入职时间" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">性别</label>
								<div class="layui-input-block">
									<input type="radio" name="sex" lay-filter="typeFilter" title="男" value="1" id="man" checked="checked">
									<input type="radio" name="sex" lay-filter="typeFilter" title="女" value=" 0" id="woman">
								</div>
							</div>
							<input type="hidden" name="ordernum" id="ordernum" autocomplete="off" class="layui-input">
						</div>

						<div class=class="layui-form-item" style="text-align: center;">
							<a class="layui-btn" lay-submit="" lay-filter="doSubmit" id="doSubmit">
								<i class="layui-icon layui-icon-release"></i>立即提交</a>
							<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="dataFrm-reset-btn">
								<i class="layui-icon layui-icon-refresh"></i>重置</a>
						</div>
					</form>
				</div>
				<!--添加和修改的弹层结束-->

				<!--分配角色权限的弹层开始-->
				<div id="asignRoleDiv" style="display: none; padding: 0.3125rem;">
					<table class="layui-hide" id="roleSelectTable" lay-filter="role"></table>
				</div>
				<!--分配菜单权限弹层结束-->
			</div>
		</div>




		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
		<script src="../../../lib/common/selectLayer.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>
		<script>
			layui.use(['form', 'table', 'laydate', 'layer', 'treeTable'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					layer = layui.layer,
					laydate = layui.laydate,
					treeTable = layui.treeTable;

				laydate.render({
					elem: '#hiredate'
				})

				/**
				 * 加载 数据
				 */
				var tableIns = table.render({
					elem: '#userTable',
					url: api + 'user/loadAllUser',
					title: '用户数据表',
					toolbar: '#userToolBar',
					height: 'full-220',
					cols: [
						[{
								field: 'name',
								title: '用户名',
								align: "center",
								width: 110
							},
							{
								field: 'loginname',
								title: '登录名',
								align: "center",
								width: 110
							},
							{
								field: 'deptname',
								title: '所属部门',
								align: "center",
								width: 120
							},
							{
								field: 'address',
								title: '地址',
								align: "center",
								width: 80
							},
							{
								field: 'sex',
								title: '性别',
								align: "center",
								width: 60,
								templet: function(data) {
									return data.sex == 1 ? '男' : '女';
								}
							},
							{
								field: 'hiredate',
								title: '入职日期',
								sort: true,
								align: "center",
								width: 110
							},
							{
								field: 'remark',
								title: '备注',
								align: "center",
							},
							{
								field: 'imagepath',
								title: '图片',
								align: "center",
								width: 80,
								templet:function(d){
									return "<img width = 30 height = 30 src = '"+baseUrl+d.imgpath+"'/>"
								}
							},
							{
								field: 'available',
								title: '是否可用',
								align: "center",
								templet: '#availableTpl',
								width: 110
							},

							{
								title: '操作',
								templet: '#userBar',
								fixed: "right",
								align: "center",
								width: 260
							}
						]
					],
					done: function(data, curr) {
						//不是第一页时，如果当前返回的数据为0那么就返回上一页
						if (data.data.length === 0 && curr !== 1) {
							tableIns.reload({
								page: {
									curr: curr - 1
								}
							})
						}
					},
					// limits: [10, 15, 20, 25, 50, 100],
					// limit: 10,
					page: true
				});

				/**
				 * 监听搜索操作
				 */
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();
					console.log(data);
					//执行搜索重载
					table.reload('userTable', {
						page: {
							curr: 1
						},
						url: api + 'user/loadAllUser?' + params
					});
					return false;
				});

				/**
				 * 监听重置操作
				 */
				form.on('submit(data-reset-btn)', function(data) {
					$("#searchFrm")[0].reset(); // 清空搜索信息框中的数据
					//执行搜索重载
					table.reload('userTable', {
						page: {
							curr: 1
						},
						url: api + 'user/loadAllUser'
					});
					return false;
				});

				form.on('submit(dataFrm-reset-btn)', function(data) {
					$("#dataFrm")[0].reset(); // 清空表格信息框中的数据
					$("#addOrUpdateDeptnameDeptid").val("");
					return false;
				});

				/**
				 * 监听表头的事件
				 */
				table.on('toolbar(userFilter)', function(obj) {
					switch (obj.event) {
						case 'addUser':
							addUser();
							break;
					};
				});

				/**
				 * 监听行数据的事件
				 */
				table.on('tool(userFilter)', function(obj) {
					var data = obj.data; // 获得当前行数据
					if (obj.event == 'delete') {
						layer.confirm('真的删除行么？', {
							icon: 3,
							title: '提示'
						}, function(index) {
							$.get(api + 'user/queryRoleIdsByUid', {
								uid: data.id
							}, function(d) {
								console.log(d);
								if (!d.length == 0) {
									layer.msg("删除失败！请先移除该用户的权限");
								} else {
									$.post(api + 'user/deleteUser', {
											id: data.id
										},
										function(res) {
											if (res.code == 200) {
												tableIns.reload();
											}
											layer.msg(res.msg);
										});
								}
								layer.close(index);
							});

						});
					} else if (obj.event == 'update') {
						updateUser(data);
					} else if (obj.event == 'asign-role') {
						asignRole(data);
					} else if (obj.event == 'resetUserPwd') {
						resetUserPwd(data);
					}
				});

				/**
				 * 监听按钮操作
				 */
				form.on('switch(availableSwitch)', function(obj) {
					$.post(api + 'user/updateUser', {
							id: this.value,
							available: obj.elem.checked ? 1 : 0
						},
						function(res) {})
				});

				/**
				 * 监听所选择的部门
				 */
				$("#doSelectDept").click(function() {
					var deptid = $("#deptid").val();
					openDeptSelect(deptid, function(id, name) {
						$("#deptid").val(id);
						$("#deptname").val(name);
					})
				})

				/**
				 * 监听添加和修改所选择的部门
				 */
				$("#doDataSelectDept").click(function() {
					var deptid = $("#addOrUpdateDeptnameDeptid").val();
					openDeptSelect(deptid, function(id, name) {
						$("#addOrUpdateDeptnameDeptid").val(id);
						$("#addOrUpdateDeptname").val(name);
					})
				})

				/**
				 * 打开用户的添加弹出层
				 */
				var mainIndex;
				var url; // 动态的url
				function addUser() {
					mainIndex = layer.open({
						type: 1,
						title: '添加用户',
						area: ['700px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							url = api + "user/addUser";
							$("#dataFrm")[0].reset();
							$.get(api + 'user/queryUserMaxOrderNum', function(res) {
								$("#ordernum").val(res.data);
							})
						}
					})
				}

				/**
				 * 打开用户的编辑弹出层
				 */
				function updateUser(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改用户',
						content: $("#addOrUpdateDiv"),
						area: ['700px'],
						success: function(index) {
							url = api + "user/updateUser";
							// 装载数据表格 	
							form.val("dataFilter", data);
							// 根据部门id查询部门名称
							$.get(api + 'dept/getDeptById', {
								id: data.deptid
							}, function(res) {
								$("#addOrUpdateDeptname").val(res.data.name);
							})
						}
					})
				}


				/**
				 * 监听密码重置操作
				 */
				function resetUserPwd(data) {
					layer.confirm('确定要重置密码吗？', {
						icon: 3,
						title: '提示'
					}, function(index) {
						$.post(api + 'user/resetUserPwd', {
								id: data.id
							},
							function(res) {
								if (res.code == 200) {
									tableIns.reload();
								}
								layer.msg(res.msg);
							})
						layer.close(index);
					});
				}


				/**
				 * 分配权限
				 */
				function asignRole(data_table) {
					var role_tableIns;
					mainIndex = layer.open({
						type: 1,
						title: '给用户分配角色权限',
						content: $("#asignRoleDiv"),
						area: ['500px', '400px'],
						btn: ['<span class="layui-icon layui-icon-ok"></span>确定'],
						btnAlign: 'c',
						yes: function(index) {
							var r = role_tableIns.checkStatus();
							var uid = data_table.id;
							var params = "uid=" + uid;
							$.each(r, function(i, item) {
								params += "&rids=" + item.id;
							})
							$.post(api + 'user/saveUserRole', params, function(res) {
								layer.msg(res.msg);
							})
						},
						success: function(index) {
							role_tableIns = treeTable.render({
								elem: '#roleSelectTable',
								tree: {
									iconIndex: 1, // 折叠图标显示在第几列
									idName: 'id', // 自定义id字段的名称
									pidName: 'pid', // 自定义标识是否还有子节点的字段名称
									haveChildName: 'haveChild', // 自定义标识是否还有子节点的字段名称
									isPidData: true // 是否是pid形式数据
								},
								cols: [{
										type: "checkbox"
									},
									{
										field: 'name',
										title: '角色名称'
									},
									{
										field: 'remark',
										title: '备注',
										align: "center",

									},
								],
								reqData: function(data, callback) {
									if (data == undefined) {
										// 在这里写ajax请求，通过callback方法回调数据
										$.get(api + 'role/loadAllRoleNoPage?available=1', function(res) {
											callback(res.data); // 参数是数组类型
											// 选中已选择的菜单
											$.get(api + "user/queryRoleIdsByUid", {
												uid: data_table.id
											}, function(rs) {
												var x = new Array();
												$.each(res.data, function(i, i_1) {
													$.each(rs, function(j, j_1) {
														if (i_1.id == j_1) {
															if (!i_1.children) {
																x.push(j_1);
															}
														}
													})
												})
												role_tableIns.setChecked(x); // 设置选中数据
											});
										});
									} else {
										callback([]); // 回调一个空数据去渲染表格
									}

								},
								page: false
							});
						}
					})
				}


				/**
				 * 提交数据
				 */
				form.on('submit(doSubmit)', function(data) {
					var params = $("#dataFrm").serialize();
					console.log(data);
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);

					})
					return false;
				});
				

			});
		</script>
		<script>

		</script>

	</body>
</html>
